<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="用户昵称">
                <a-input allowClear placeholder="用户昵称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="手机号码">
                <a-input allowClear placeholder="手机号码" v-model="queryParam.phone"></a-input>
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-item label="起止时间">
                <a-range-picker v-model="queryParam.dateTime" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="onSearch(true)">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>

    <a-card :border="false">
      <STable ref="table" size="default" :columns="columns" :data="loadData">
        <div class="flex-y-center" slot="userInfo" slot-scope="text, item">
          <img class="user-head" :src="item.avatar_url" alt="" />
          <div class="flex-w-1" style="margin-left: 10px">
            <div>{{ item.nickname }}</div>
            <div>{{ item.binding }}</div>
          </div>
        </div>
        <span slot="state" slot-scope="state">
          <a-badge v-if="state == 1" status="success" text="已启用"></a-badge>
          <a-badge v-else status="default" text="已禁用"></a-badge>
        </span>
        <span slot="operation" slot-scope="item, key">
          <a-button @click="showModal(key)" type="link">查看记录</a-button>
        </span>
      </STable>

    </a-card>
  </page-header-wrapper>
</template>

<script>
import ChartGptApi from '@/api/chartGpt'
import STable from '@/components/Table'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 100,
  },
  {
    title: '用户信息',
    width: 300,
    scopedSlots: { customRender: 'userInfo' },
  },
  {
    title: '获取积分',
    dataIndex: 'integral',
    customRender: (text) => text + '积分',
    sorter: (a, b) => a.integral - b.integral,
  },
  {
    title: '问答时间',
    dataIndex: 'created_at',
    sorter: (a, b) => Number(new Date(a.created_at)) - Number(new Date(b.created_at)),
  },

]

export default {
  components: {
    STable,
  },
  data() {
    return {
      columns,
      queryParam: {
        name: '',
        phone: '',
        dateTime: [],
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: async (parameter) => {
        console.log(parameter)
        var formData = Object.assign(parameter, this.queryParam)
        const res = await ChartGptApi.adLogList(formData)
        console.log(res.data, 'loadData1')

        return res.data
      },
    }
  },
  created() {},
  methods: {
    onSearch(type = false) {
      this.$refs.table.refresh(type)
    },
  },
}
</script>

<style lang="scss" scoped>
.user-head {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}

.list {
  min-height: 40vh;
  max-height: 60vh;
  overflow-y: scroll;
  .item {
    display: flex;
    margin-bottom: 10px;

    .jd {
      position: relative;
      margin: 0 10px;
      min-height: 60px;
      width: 1px;
      &::after {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 3px solid #1890ff;
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(0, 10px);
        height: calc(100% + 10px);
        width: 1px;
        background: #ccc;
      }
    }

    .jd-1 {
      &::after {
        border-color: #52C41A;
      }
    }
    .content {
      width: 0;
      flex: 1;
    }

    &:nth-last-child(1) {
      .jd {
        height: 0;
        min-height: initial;
      }
    }
  }
}
</style>
